<template>
  <div id="BanLiSGXK" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
    <div>
      <div class="content">
        <div v-show="ISShow" :class="showMoble ? 'contentTop' : 'showPC'">
          <ul class="content-nfjs" v-if="!showBg1">
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 0"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/5.png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 1"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/6.png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 2"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/7.png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
          </ul>
          <ul class="content-nfjs" v-else>
            <li
              v-for="(item, index) in NFJSData"
              :style="{ background: 'url(' + item.bg + ')', marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (2).png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <van-action-sheet v-model="showTC" title="请选择需要办理的户主">
      <div class="SQList">
        <ul>
          <div style="position: relative">
            <li v-show="contentData.length > 0" v-for="(item, index) in contentData" :key="index">
              <div :style="{ float: 'left', width: '100%' }" @click="getListData(item)">
                <p style="font-weight: bold; height: 28px">
                  <span style="float: left">{{ item.personname }}</span>
                  <span style="float: right">{{ item.applytime || '暂无数据' }}</span>
                </p>
                <p style="font-size: 14px; color: #848484; height: 28px">
                  <span style="float: left">流水号：{{ item.serialNumber }}</span>
                  <span style="float: right">{{ item.APPLYTIME }}</span>
                </p>
                <p style="font-size: 14px; color: #848484; height: 20px">
                  <span style="float: left">地址：{{ item.address || '暂无数据' }}</span>
                </p>
              </div>
            </li>
          </div>
          <div style="height: 60vh; text-align: center; padding-top: 20vh" v-show="noData">
            <div style="margin-bottom: 10px">
              <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
          </div>
        </ul>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model="showTC1" title="请选择需要办理的户主">
      <div class="SQList">
        <ul>
          <div style="position: relative">
            <li v-show="contentData.length > 0" v-for="(item, index) in contentData" :key="index">
              <div :style="{ float: 'left', width: '100%' }" @click="getListData1(item)">
                <p style="font-weight: bold; height: 28px">
                  <span style="float: left">{{ item.HOUSEAPPLICANT }}</span>
                  <span style="float: right">{{ item.APPLYTIME || '暂无数据' }}</span>
                </p>
                <p style="font-size: 14px; color: #848484; height: 28px">
                  <span style="float: left">流水号：{{ item.LSH }}</span>
                  <!-- <span style="float: right">{{ item.APPLYTIME }}</span> -->
                </p>
                <p style="font-size: 14px; color: #848484; height: 20px">
                  <span style="float: left">地址：{{ item.CONSTRUCITONADDRESS || '暂无数据' }}</span>
                </p>
              </div>
            </li>
          </div>
          <div style="height: 60vh; text-align: center; padding-top: 20vh" v-show="noData">
            <div style="margin-bottom: 10px">
              <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
          </div>
        </ul>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import { LoadGridData, JFDataList, FileServerProxy, companyData } from '../../utils/api'
import { addDate, GSA_Search1 } from '../../common/commonApi'
import { isLinAn } from '@/utils/isLinAn'
import { GJDBFunction2 } from '@/utils/queryData'
export default {
  data() {
    return {
      showMoble: true, //初始化移动端相关内容的显示
      showEdition: true,
      indexData: '',
      showTC1: false,
      showTC: false,
      noData: false,
      showBg1: true,
      nowIndex: 0,
      areaValue: [''],
      contentData: [],
      ISShow: true,
      IsShowAre: false,
      usernem: '',
      areaList,
      imageList: [
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' }
      ],
      bottomData: [
        {
          name: '首页',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png'
        },
        {
          name: '我的申请',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png'
        },
        {
          name: '我的收藏',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22-1.png'
        }
      ],
      NFJSData: [
        {
          name: '施工备案申请',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/5.png',
          bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/5.png'
        },
        {
            name: '施工备案变更',
            bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/6.png',
            bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/6.png',
        },
        {
            name: '施工备案延期',
            bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/7.png',
            bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SGXK/7.png',
        },
      ],
      NFJSDataThirdParty: [
        {
          name: '我要入驻',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/32.png'
        },
        {
          name: '我的项目',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/33.png'
        }
      ],
      ISShowList: true
    }
  },
  components: {},
  methods: {
    /* 分辨率区分--PC端+移动端 */
    judgmentResolution() {
      var sUserAgent = navigator.userAgent.toLowerCase()
      var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os'
      var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
      var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb'
      var bIsAndroid = sUserAgent.match(/android/i) == 'android'
      var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
      var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        this.showMoble = true
      } else {
        this.showMoble = false
      }
    },
    async get_projectstatus() {
      const res = await GJDBFunction2('get_projectstatus', [{ task_recipient: this.rowData.ROW_GUID, querytype: 1 }])
    },
    //获取当前人名下所有的待办件
    async getData(data) {
      this.indexData = data
      if (data == '施工备案申请') {
        const res2 = await JFDataList(window.localStorage.getItem('DanDianid'))
        this.contentData = res2.data.data.pageList
        if (companyData.length == 0) {
          this.$toast.fail('经查询，您未在本应用进行建房申请，无法办理施工备案，请联系有关部门。')
          return false
        } else {
          this.showTC = true
        }
      } else if (data == '施工备案变更' || data == '施工备案延期') {
        let data1 = [
          { field: 'certificatecode', value: window.localStorage.getItem('DanDianid'), link: 'OR', operator: '=' },
          { field: 'DBRSFZH', value: window.localStorage.getItem('DanDianid'), link: 'AND', operator: '=' }
        ]
        const res = await GSA_Search1('f3e21c5c-ab47-4446-bfd7-7131d1e76e1d', data1)
        this.contentData = res.Data
        if (res.Data.length == 0) {
          this.$toast.fail('经查询，您未在本应用进行建房申请，无法办理施工备案，请联系有关部门。')
          return false
        } else {
          this.showTC1 = true
        }
      }
    },
    async getListData(item) {
      //改变当前citycode
      if (item.s) {
        // window.localStorage.setItem('citycode', item.s)
        if (item.cun !== null) {
          const res = await isLinAn(item.cun)
          if (res) {
            window.localStorage.setItem('citycode', '330112000000')
          } else {
            let code1 = item.cun.slice(0, 4) + '00000000'
            window.localStorage.setItem('citycode', code1)
          }
        } else {
          window.localStorage.setItem('citycode', '441300000000')
        }
      }
      window.localStorage.setItem('serialNumber', item.serialNumber)
      let isNHApplyParamNH = {
        procName: 'ZJBXDBX',
        dtParams: JSON.stringify([{ I_USERID: "'" + item.rowGuid + "'", I_SJH: "'" + item.serialNumber + "'" }]),
        token: window.localStorage.getItem('token')
      }
      let xcfycjtfnApplynh = {
        accessCode: '69db6bece3a7480592e2ec753d1e335e',
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: isNHApplyParamNH
      }
      const resxcfycjtApplynh = await FileServerProxy(xcfycjtfnApplynh)
      let data = JSON.parse(resxcfycjtApplynh.data.data).Data[0]
      console.log(data, '小赵')
      if (!data && data.length == 0) {
        this.$toast.fail('经查询，您的建房审批业务正在审批中，请审批完成后再申请施工备案。')
        return false
      } else {
      }
      let rowGuid1 = JSON.parse(window.sessionStorage.getItem('fileData'))
      if (data?.OLD_GJ == 2 || data?.OLD_GJ == 3) {
        this.$toast.fail('已发起施工备案申请，暂时不需要操作')
      } else if (data?.OLD_GJ == 8){
        this.$toast.fail('建房审批未结束,不允许申请施工备案证')
      } else if (data?.OLD_GJ == 9){
        this.$toast.fail('申请施工备案证流程已结束')
      }
       else {
        window.sessionStorage.setItem('fileData', JSON.stringify(data))
        this.$router.push({
          path: '/fileData'
        })
      }
    },
    async getListData1(data) {
      window.sessionStorage.setItem('fileData', JSON.stringify(data))
      this.indexData == '施工备案变更' ? window.sessionStorage.setItem('RUNTYPE', '2') : window.sessionStorage.setItem('RUNTYPE', '5')
      this.$router.push({
        path: '/biangeng'
      })
    },
    NFJSClick(item) {
      switch (item.name) {
        case '施工备案申请':
          this.getData(item.name)
          // window.sessionStorage.setItem('fileData', JSON.stringify(this.tableData))
          break
        case '施工备案变更':
          this.getData(item.name)
          // window.sessionStorage.setItem('RUNTYPE', "2")
          // this.$router.push({
          //     path: '/biangeng'
          // })
          break
        case '施工备案延期':
          this.getData(item.name)
          // window.sessionStorage.setItem('RUNTYPE', "5")
          // this.$router.push({
          //     path: '/biangeng'
          // })
          break
      }
    }
  },
  mounted() {
    this.showEdition = this.$store.state.Edition
    window.localStorage.setItem('citycode',window.localStorage.getItem('citycodeChange'))
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '我要建房'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  },
  created() {
    if (window.sessionStorage.getItem('showBg1') == 'true') {
      this.showBg1 = false
    } else {
      this.showBg1 = true
    }
    this.judgmentResolution()
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'ApplicationPage') {
      window.location.reload() // 页面刷新
      next()
    } else {
      next()
    }
  }
}
</script>
<style lang="scss" scoped>
#BanLiSGXK {
  height: calc(100vh - 60px);
  overflow: auto;
  background: #fff;
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;

  .top {
    position: relative;
    color: #ffffff;

    .left-top {
      position: absolute;
      left: 10px;
      top: 10px;

      .btn {
        width: auto;
        height: 26px;
        border: 1px solid #e1eaff;
        border-radius: 4px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }

    .bottom-top {
      width: 95%;
      position: absolute;
      left: 10px;
      bottom: 10px;

      .btn {
        float: right;
        width: auto;
        height: 26px;
        // border: 1px solid #e1eaff;
        border-radius: 16px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.1);
  }

  .SQList {
    height: calc(100vh - 60px);
    background: #ffffff;

    .title {
      width: 100%;
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }

    ul li {
      padding: 10px;
      height: 90px;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 260px);

    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }

    .content-nfjs li {
      width: 49%;
      height: 70px;
      float: left;
      margin-top: 2%;
      position: relative;
      background-size: 100% 100% !important;
      display: flex;
      align-items: center;
      padding-left: 60px;
    }

    .content-nffw li {
      width: 20%;
      float: left;
      margin-top: 2%;

      span {
        width: 100%;
        display: inline-block;
        font-size: 14px;
        text-align: center;
      }
    }

    .content-nffm li {
      width: 49%;
      float: left;
      margin-top: 2%;
      margin-bottom: 3%;

      .text {
        width: 100%;
        display: inline-block;
        height: 6vh;
        background: #ffffff;
        box-shadow: 2px 1px 6px 0px rgba(0, 0, 0, 0.17);
        border-radius: 0px 0px 20px 20px;
        text-align: center;
        line-height: 6vh;
      }
    }

    .contentTop {
      background: #ffffff;
      padding: 10px;
      height: 330px;
      margin-bottom: 20px;
    }
  }

  .showPC {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    ul li {
      width: 100%;
    }
  }

  .phoneText {
    margin: 8px;
    height: 86px;
  }

  .bottom {
    clear: both;
    position: fixed;
    bottom: 0;
    // height: 100px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    background: #ffffff;

    ul li {
      //   margin: 10px 0 16px 0;
      float: left;
      width: 33.3%;
    }
  }
}
</style>

<style lang="scss">
#BanLiSGXK {
  .van-cell {
    padding: 4px !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 14px;
    line-height: 24px;
    background-color: transparent !important;
  }

  .van-cell__value--alone {
    color: #fff !important;
  }
}
</style>
